<%@ page contentType="text/html; charset=UTF-8" language="java" errorPage=""%>
<%@ page import="org.apache.commons.lang.StringUtils,cn.com.chec.en.dao.TagInfoDao,cn.com.chec.en.model.domain.TagInfo,java.util.List" %>
<%
String tagWords = StringUtils.isNotBlank((String)request.getAttribute("tagWords")) ?  (String)request.getAttribute("tagWords"): "" ;
TagInfoDao tagDao = new TagInfoDao();
List<TagInfo> tagList = tagDao.getAll();
%>
<html>
<head>
<title>TAG关键词选取</title>
<META http-equiv="content-type" content="text/html; charset=UTF-8">
<LINK href="../../styleAdmin/css/portalinabox.css" type="text/css" rel="stylesheet">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> 
</head>
<body leftMargin="8">
<form method="post" name="myform">
  <table border="0" width="300" align="center">
    <tr>
    	<td align=center>待选TAG关键字</td>
    	<td></td>
    	<td align=center>已选TAG关键字</td>
    </tr>
    <tr>
      <td width="40%">
  			<select style="width:100%;" multiple name="tagWord" size="12" ondblclick="moveOption(document.myform.tagWord, document.myform.selectedTagWord,'add')">
				<%
				for(TagInfo tag : tagList){
					if(tagWords.indexOf(tag.getId() + ",") > -1){
						continue;  // 如果已经选择过 ，就直接放在右侧
					}
				%>
					<option value="<%=tag.getId() %>"><%=tag.getTag() %></option>
				<%} %>
  			</select>
   		</td>
      <td width="20%" align="center">
  			<input type="button" value=">>>" onclick="moveOption(document.myform.tagWord, document.myform.selectedTagWord,'add')"><br><br>
  			<input type="button" value="<<<" onclick="moveOption(document.myform.selectedTagWord, document.myform.tagWord,'del')">
   		</td>
      <td width="40%">
  			<select style="width:100%;" multiple name="selectedTagWord" size="12" ondblclick="moveOption(document.myform.selectedTagWord, document.myform.tagWord,'del')">
  				<%
				for(TagInfo tag : tagList){
					if(tagWords.indexOf(tag.getId() + ",") > -1){
				%>
					<option value="<%=tag.getId() %>"><%=tag.getTag() %></option>
				<%} }%>
 			</select>
   		</td>
    </tr>
    <tr height="60"><td colspan=3>&nbsp;</td></tr>
    
    
    <tr height="60"><td colspan=3>&nbsp;</td></tr>
    <tr>
    	<td colspan=3 align=center>
    	  <input type="button" value="完成选择" onclick="window.returnValue=document.myform.successTagWord.value;window.close();">
    	  <input type="button" value="取消选择" onclick="window.close();">
    	</td>
    </tr>
     <tr>
    	<td colspan=3 align=center><br><br>
    	  选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选,鼠标拖动也可多选)，
    	  或在选择项上双击进行添加和移除。
    	</td>
    </tr>
  </table>
<input type="hidden" name="successTagWord" size="40" value="" />
</form>
<script language="JavaScript">
<!--
// 需要制定那个是目标，就是要删除的，或者要添加的
function moveOption(e1, e2,flag){
 try{
  for(var i=0;i<e1.options.length;i++){
  
  	if(flag == 'add'){
  		if(e2.options.length >= 20){
	   		alert('每次最多可以选择20个条目');
	   		break;
   		}
    }
    if(flag == 'del'){
  		if(e1.options.length > 20){
	   		alert('每次最多可以选择20个条目');
	   		break;
   		}
    }
/**   if(e2.options.length >= 20){
   		alert('每次最多可以选择20个条目');
   		break;
   }
**/
   if(e1.options[i].selected){
    var e = e1.options[i];
    e2.options.add(new Option(e.text, e.value));
    e1.remove(i);
    i=i-1;
   }
  }
  document.myform.successTagWord.value=getvalue(document.myform.selectedTagWord);
 }
 catch(e){}
}
function getvalue(geto){
 var allvalue = "";
 for(var i=0;i<geto.options.length;i++){
  allvalue +=geto.options[i].value + "," + geto.options[i].text + ";";
 }
 return allvalue;
}

function addOption(optVal, e2)
{
   if(e2.options.length >= 20)
   {
   		alert('每次最多可以选择20个条目');
   		return;
   }
   if(optVal == null || optVal == '')
   {
   		alert('请输入要添加的动态域名');
   		return;
   }
   e2.options.add(new Option(optVal, optVal));
   document.myform.successTagWord.value=getvalue(document.myform.selectedTagWord);
}
//-->
</script>
</body>
</html>